<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        /* CSS样式 */
        .login-box {
            width: 300px;
            height: 225px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.15);
            /*border: 1px solid #ccc;*/
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
        }

        .login-box .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .login-box .head h2 {
            margin-top: -5px;
            flex: 1;
            color: rgba(255, 255, 255, 0.8);
        }

        .login-box .head h5 {
            color: red;
            visibility: visible;
            transition: visibility 0.01s ease;
        }

        .login-box .head.clicked h5 {
            visibility: hidden;
        }

        .login-box input[type="text"],
        .login-box input[type="password"] {
            background-color: rgba(255, 255, 255, 0.0);
            border-radius: 10px;
            display: block;
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            outline: none;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            /*color: rgba(240, 242, 248, 0.84);*/
        }

        .login-box input[type="text"]{
            transition: transform 0.3s ease;
        }
        .login-box input[type="password"]{
            transition: transform 0.3s ease;
        }

        .login-box input[type="text"]:hover {
            transform: scale(1.08);
        }
        .login-box input[type="password"]:hover {
            transform: scale(1.08);
        }

        .login-box input[type="submit"],
        .login-box input[type="reset"] {
            border-radius: 13px;
            display: inline-block;
            width: 95px;
            padding: 10px;
            margin-right: 10px;
            /*background-color: blue;*/
            color: rgba(255, 255, 255, 0.8);
            border: none;
            cursor: pointer;
            font-weight: bolder;
            font-size: 18px;
            background-color: rgba(253, 253, 252, 0.16);

        }
        .login-box input[type="submit"]{
            transition: transform 0.3s ease;
        }
        .login-box input[type="reset"]{
            transition: transform 0.3s ease;
        }

        .login-box input[type="submit"]:hover {
            transform: scale(1.12);
        }
        .login-box input[type="reset"]:hover {
            transform: scale(1.12);
        }



        .login-box a {
            display: block;
            text-align: center;
            margin-top: 10px;
            height: 15px;

        }

        body{
            background-image: url("images/网页背景图.jpg");
            /*background-size: 100%;*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            color: rgba(255, 255, 255, 0.8);
        }
        input::placeholder {
            color: rgba(255, 255, 255, 0.8);

        }
        form a{
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 14px;
            transition: transform 0.3s ease;
        }
        form a:hover{
            transform: scale(1.12);
        }

        .header a{
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease;
        }

        .header a:hover{
            transform: scale(1.12);
        }



        .btn{
            text-align: center;
        }
        .logo h2{
            margin-left: 20px;
            margin-top: 15px;
        }
        .slogan{
            text-align: center;
        }
        .slogan h1{
            margin-top: 60px;
        }


    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <h2><a href="index.jsp">九州</a></h2>
    </div>
</div>
<div class="slogan"><h1>九州绘画,让服装设计更简单！</h1></div>
<div class="login-box">
    <form action="/servletControll" method="post">
        <div class="head">
            <h2 style="margin-bottom: 10px;">用户登录</h2>
            <% if(request.getAttribute("error") != null) { %>
            <h5 style="margin-bottom: 15px;margin-top: 2px";><%= request.getAttribute("error") %></h5>
            <% } %>
        </div>
        <input type="text" name="username" placeholder="请输入你的用户名" style="width: 275px;" id="username" required/>
        <input type="password" name="password" placeholder="请输入你的密码" style="width: 275px;margin-bottom: 18.5px" id="password" required/>
        <div class="btn">
            <input type="submit" value="登 录" />
            <input type="reset" value="重 置" />
        </div>
        <a href="register.jsp">没有账号？点击注册新用户</a>
    </form>
</div>
<script>
    document.addEventListener("click", function(event) {
        var loginBox = document.querySelector(".login-box");
        var target = event.target;
        if (target.closest(".login-box")) {
            var h5 = loginBox.querySelector(".head h5");
            h5.style.visibility = "hidden";
            loginBox.querySelector(".head").classList.add("clicked");
        }
    });
    var login = document.querySelector(".login-box");
    var head = document.querySelector(".head");
    head.addEventListener('mousedown', function (e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
        document.addEventListener('mousemove', move)

        function move(e) {
            login.style.left = e.pageX - x + 'px';
            login.style.top = e.pageY - y + 'px';
        }
        // (3) 鼠标弹起，就让鼠标移动事件移除
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        })
    })
    var u = document.getElementById("username");
    u.onfocus = function () {
        // console.log('获得了焦点（喜）');
        if (this.placeholder === "请输入你的用户名") {
            this.placeholder = "";
        }
        // this.style.color="#333";
    }
    u.onblur = function () {
        // console.log('失去了焦点（悲）');
        if (this.placeholder === "") {
            this.placeholder = "请输入你的用户名";
        }
        // this.style.color="#ccc"

    }
    var p = document.getElementById("password");
    p.onfocus = function () {
        // console.log('获得了焦点（喜）');
        if (this.placeholder === "请输入你的密码") {
            this.placeholder = "";
        }
        // this.style.color="#333";
    }
    p.onblur = function () {
        // console.log('失去了焦点（悲）');
        if (this.placeholder === "") {
            this.placeholder = "请输入你的密码";
        }
        // this.style.color="#ccc"

    }
</script>
</body>
</html>
